<template>
  <div class="app-container">
    <div
      style="
        width: 600px;
        height: 600px;
        margin: 0 auto;
        background-color: #fff;
        position: relative;
      "
    >
      <!-- 全屏图标按钮 -->
      <i
        class="el-icon-rank"
        style="
          font-size: 22px;
          transform: rotate(45deg);
          color: rgb(135 135 135);
          cursor: pointer;
          position: absolute;
          top: 5px;
          right: 105px;
          z-index: 5;
        "
        title="全屏"
        @click="fullSc()"
      />
      <!-- 图表容器 -->
      <div id="main" style="width: 100%; height: 100%" />
    </div>
    <!-- 全屏弹框 -->
    <el-dialog
      title="全屏显示"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      center
    >
      <div
        id="main1"
        ref="fullChart"
        :style="'width:100%;height:' + (screenHeight - 110) + 'px'"
      />
    </el-dialog>
  </div>
</template>
<script>
import { EleResize } from "@/assets/js/esresize.js";
// import { EleResize } from '@/utils/esresize'// 图表自适应
import * as echarts from "echarts";
export default {
  data() {
    return {
      dialogVisible: false,
      screenHeight: window.innerHeight,
    };
  },
  // 监听screenHeight大小，从而改变全屏画图容器的大小
  watch: {
    screenHeight(val) {
      this.screenHeight = val;
    },
  },
  mounted() {
    // 初始画图
    this.initChart(document.getElementById("main"));
    // 获取浏览器窗口大小
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    // 初始画图
    initChart(domName) {
      var myChart = echarts.init(domName);
      // 图表自适应
      const listener = function () {
        myChart.resize();
      };
      EleResize.on(domName, listener);
      var option = {
        title: {
          text: "ECharts实例",
        },
        toolbox: {
          feature: {
            dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
            restore: { show: true }, // 重置
            saveAsImage: { show: true }, // 导出图片
          },
        },
        legend: {
          data: ["销量1111111111111111111111", "销量22222222222222222222"],
          orient: "horizontal",
          formatter: function (params) {
            if (params.length > 10) {
              var p1 = params.slice(0, 10);
              var p2 = params.slice(10);
              return p1 + "\n" + p2;
            } else {
              return params;
            }
          },
        },
        xAxis: {
          data: [
            "衬衫111111111",
            "羊毛衫1111111111111",
            "雪纺衫111111111",
            "裤子111111111",
            "高跟鞋11111111",
            "袜子1111111111",
          ],
          axisLabel: {
            // 坐标轴标签
            interval: 0,
            // rotate: 45, // 倾斜度 -90 至 90 默认为0
            margin: 12,
            textStyle: {
              fontWeight: "bolder",
              color: "#000000",
            },
            // 坐标轴刻度标签换行处理
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 8; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p === rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              // 将最终的字符串返回
              return newParamsName;
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "宇\n宙\n无\n敌\n第\n一\n大\n帅\n比\n就\n是\n我\n哈\n哈\n哈\n哈\n额\n！！！",
            nameLocation: "middle",
            nameRotate: 0,
            nameTextStyle: {
              padding: [0, 50, 0, 0],
              align: "center",
            },
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "blue",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "你\n们\n就\n承\n认\n我\n是\n宇\n宙\n无\n敌\n第\n一\n大\n帅\n比\n吧\n！！！",
            nameLocation: "middle",
            nameRotate: 0,
            nameTextStyle: {
              padding: [0, 0, 0, 60],
              align: "center",
            },
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91cc75",
              },
            },
            axisLabel: {
              formatter: function (value) {
                // 科学计数法显示标签
                var res = value.toString();
                var numN1 = 0;
                var numN2 = 1;
                var num1 = 0;
                var num2 = 0;
                var t1 = 1;
                for (var k = 0; k < res.length; k++) {
                  if (res[k] === ".") {
                    t1 = 0;
                  }
                  if (t1) {
                    num1++;
                  } else {
                    num2++;
                  }
                }
                if (Math.abs(value) < 1 && res.length > 4) {
                  for (var i = 2; i < res.length; i++) {
                    if (res[i] === "0") {
                      numN2++;
                    } else if (res[i] === ".") {
                      continue;
                    } else {
                      break;
                    }
                  }
                  var v = parseFloat(value);
                  v = v * Math.pow(10, numN2);
                  return v.toString() + "e-" + numN2;
                } else if (num1 > 4) {
                  if (res[0] === "-") {
                    numN1 = num1 - 2;
                  } else {
                    numN1 = num1 - 1;
                  }
                  v = parseFloat(value);
                  v = v / Math.pow(10, numN1);
                  if (num2 > 4) {
                    v = v.toFixed(4);
                  }
                  return v.toString() + "e" + numN1;
                } else {
                  return parseFloat(value);
                }
              },
            },
          },
        ],
        series: [
          {
            name: "销量1111111111111111111111",
            type: "bar",
            yAxisIndex: 0, // 指定第一个y轴
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "销量22222222222222222222",
            type: "bar",
            yAxisIndex: 1, // 指定第二个y轴
            data: [15000, 25000, 40000, 50000, 150000, 300000],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 点击全屏图标按钮弹框画图
    fullSc() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const chartFul = this.$refs.fullChart;
        if (chartFul) {
          this.initChart(document.getElementById("main1")); // 画图
        }
      });
    },
  },
};
</script>
